<template>
  <!--修改定时任务-->
  <section class="component modify-task">
    <el-form :model="model" :rules="modelRules" ref="modify-task" label-width="130px">
      <el-form-item label="任务名称" prop="jobName">
        <el-input v-model.trim="model.jobName" disabled></el-input>
      </el-form-item>
      <el-form-item label="任务描述" prop="description">
        <el-input type="textarea" v-model.trim="model.description" :autosize="{ minRows:2, maxRows:4}" :maxlength="200"></el-input>
      </el-form-item>
    </el-form>

    <div class="operate-buttons">
      <el-button @click="cancel()">取消</el-button>
      <el-button @click="confirmClick()">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop, Emit } from 'vue-property-decorator'
import { TaskService } from '~/service/service-manage/task.service'

@Component({})
export default class ModifyTask extends Vue {
  @Dependencies(TaskService)
  private taskService: TaskService
  @Prop()
  private rowData

  private model: any = {
    jobName: '',
    jobGroup: '',
    description: ''
  }
  private modelRules: any = {
    jobName: [{ required: true, message: '任务名称不能为空' }]
  }
  
  @Emit('refreshData')
  private refreshData() {}
  @Emit('close')
  private close() {}

  public refresh() {
    this.model.jobName = this.rowData.jobName
    this.model.jobGroup = this.rowData.jobGroup
    this.model.description = this.rowData.description
  }

  /**
   * 确定
   */
  private confirmClick() {
    this.taskService.updateJob(this.model).subscribe(
      data => {
        this.refreshData()
        this.close()
        this.$message.success('修改成功')
      },
      ({ msg }) => this.$message.error(msg)
    )
  }
  /**
   * 关闭弹窗
   */
  private cancel() {
    let addForm: any = this.$refs['modify-task']
    addForm.resetFields()
    this.close()
  }
}
</script>
